<template>
   <div>
       <div class="infotop">
           <div class="haced">
              <div class="toto">
                  <span  @click="$router.push('/recommend')" class="iconfont icon-zuoyou1"></span>
                  <span class="iconfont icon-santiaogang" ></span>
              </div>
           </div>
           <div class="principal">
                <div class="ert" >
                    <div class="mine" v-if="minelist.profile">
                        <div class="profile1" v-if="minelist.profile">
                            <img :src="minelist.profile.avatarUrl" alt="">
                        </div>
                        <div class="name1">{{minelist.profile.nickname}}</div>
                        <!-- {{profile}} -->
                        <div class="tiemy">
                            <span>3&nbsp;关注</span>
                            <span>粉丝</span>
                            <span>lv.4</span>
                        </div>
                        <div class="mymss">
                            <span>
                            <i></i>90后&nbsp;摩羯座
                            </span>
                            <span>
                                广西&nbsp;南宁
                            </span>
                            <span>
                                村龄2年
                            </span>
                        </div>
                        <div class="textmy">
                            <span><i>编辑资料</i></span>
                            <!-- <span></span> <i class="iconfont icon-zuoyou"></i> -->
                        </div>
                    </div>
                </div>
                 
                 <div class="min-nav">
                    <div class="toitem con">主页</div>
                    <div class="toitem ">动态</div>
                    <div class="toitem ">播客</div>
                 </div>
                 <div class="flist">
                     <div class="itemf">
                         <p>唱片收藏架</p>
                         <span >布置唱片架<i class="iconfont icon-zuoyou2"></i></span>
                     </div>
                     <div class="itemf">
                         <p>唱片收藏架</p>
                         <span >布置唱片架<i class="iconfont icon-zuoyou2"></i></span>
                     </div>
                     <div class="itemf">
                         <p>唱片收藏架</p>
                         <span>布置唱片架<i class="iconfont icon-zuoyou2"></i></span>
                     </div>
                 </div>
                
                 <div class="mu-taste">
                     <h3>音乐品味</h3>
                     <router-link tag="div" class="yumu-list" to="/hotisy">
                       <!-- <div class="yumu-list" @click="gethoslishi"> -->
                        <div class="listimg">
                            <img src="https://img0.baidu.com/it/u=2782314969,2376419105&fm=26&fmt=auto" alt="">
                        </div>
                        <div class="img-to" >
                            <h5>Aimer</h5>
                            <p>累计听歌1首</p>
                        </div>
                        <!-- </div> -->
                       </router-link>
                       <router-link tag="div" class="yumu-list" to="/listvue">
                     <!-- <div class="yumu-list"  @click="$router.push('/listvue')"> -->
                         <div class="listimg">
                              <img src="https://img0.baidu.com/it/u=2782314969,2376419105&fm=26&fmt=auto" alt="">
                         </div>
                         <div class="img-to" >
                            <h5>我喜欢的音乐</h5>
                            <p><span>1首,</span><i>播放1次</i></p>
                         </div>
                     <!-- </div> -->
                       </router-link>
                 </div>
                 
           </div>
           <div class="bord" v-show="!boboto">
                <div class="toto">
                    <h3>
                        <span class="iconfont icon-zuoyou" @click="boboto=true"></span><span>播放历史</span>
                    </h3>
                </div>
                <ul v-if="hotsds.allData">
                    <li v-for="(item) in hotsds.allData" :key="item.id" @click="asd(item.song.id)">
                        <div class="podlistleft">
                              <van-image
                               lazy-load
                               :src="item.song.al.picUrl"
                            />
                            <!-- <img :src="item.song.al.picUrl" alt=""> -->
                        </div>
                        <div class="podlistright" v-if="item.song.ar">
                            <h3><span>{{item.song.name}}</span></h3>
                            <h3 class="bt"><span>{{item.song.name}}</span>---<span class="te">{{item.song.ar[0].name}}</span></h3>
                        </div>
                    </li>
                </ul>
            </div>
             <div class="bordt" v-show="boboo" >
                <div class="toto">
                    <h3>
                        <span class="iconfont icon-zuoyou" @click="getgedan"></span><span>我的歌单</span>
                    </h3>
                </div>
                <ul v-if="mylvoelist.playlist">
                    <li v-for="(item) in mylvoelist.playlist.tracks" :key="item.id">
                        <div class="podlistleft">
                              <van-image
                             lazy-load
                             :src="item.al.picUrl"
                            />
                            <!-- <img :src="item.song.al.picUrl" alt=""> -->
                        </div>
                        <div class="podlistright">
                            <h3><span>{{item.name}}</span></h3>
                            <h3  class="bt"><span>{{item.name}}</span>---<span class="te">{{item.ar[0].name}}</span></h3>
                        </div>
                    </li>
                </ul>
            </div>
       </div>
   </div>
</template>

<script>
import {
     getmineinformation,
     getmineaccount,
     getminesonglist,
     getnamesonger,
     getyonhuhtis,
     getmniexihun,
     getmniezhuanlan,
     getplaydetail
     } from "../api/suerinfo"
//引入底部导航getmineaccount
// import footNav from "../components/base/footNav.vue"
export default {
    data(){
        return{
            mineliet:{
                // profile:null,
            },
            minestate:{},
            minelist:{},
            minuid:null,
            boboto:true,
            hotsds:{},//历史
            xinhuanlist:[],
            mylvoelist:{},
            boboo:false
        }
    },
    methods:{
        get(){
            //获取账号信息
             getmineaccount().then(data=>{
                console.log(data);
                this.minelist=data;
                this.minuid=this.minelist.profile.userId
                console.log(this.minuid)
                this.$emit("getnineuid",this.minuid)
            })
        },
        getmy(){
           // console.log( window.localStorage)getminesonglist
           getmineinformation({
               uid:this.minuid
           }).then(data=>{
            //    console.log(data);
                this.minestate=data;
                ////获取用户信息 , 歌单，收藏，mv, dj 数量
                getminesonglist({
                     uid:this.minuid
                }).then(data=>{
                    console.log("获取用户信息 , 歌单，收藏，mv, dj 数量",data);
                    this.mineliet=data
                })
                ////获取用户歌单
                getnamesonger({
                     uid:this.minuid
                }).then(data=>{
                     console.log("用户歌单",data);
                })
                //收藏的专栏
                getmniezhuanlan({
                     uid:this.minuid
                }).then(data=>{
                    console.log("收藏的专栏",data)
                })

           })
        },
        //获取歌单详情
        getgedan(){
             this.boboo=false
            getplaydetail({id:2641572119}).then(data=>{
                console.log("用户喜欢的歌单详情",data)
                this.mylvoelist=data
            })
        },
        //播放历史
        gethoslishi(){
            this.boboto=false;
            getyonhuhtis({uid:this.minuid}).then(data=>{
                console.log("历史",data)
                this.hotsds = data
            })
        },
        //喜欢的音乐列表 playlist tracks name
        getxihuan(){
             getplaydetail({id:2641572119}).then(data=>{
                console.log("用户喜欢的歌单详情",data)
                this.mylvoelist=data
            })
              this.boboo=true
            getmniexihun({uid:this.minuid}).then(data=>{
                console.log("喜欢的音乐列表",data)
               
                this.xinhuanlist=data
                 console.log("喜欢音乐列表",this.xinhuanlist)
            })
            
           
        },
        dfg(id){
            this.$emit("getnineuid",id);
        },
        asd(id){
            console.log(id)
              this.$emit("get-player-id",id)
              this.$emit("get-play-all-id",this.$route.query.id);//传递di
        }
    },
    created(){
        this.get();
    },
  
    watch:{
        minuid(){
            this.getmy();
        }
    }


}
</script>
<style lang="less">

  .infotop{
      background: #f3f3f3;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-bottom: 60px;
      box-sizing: border-box;
     .haced{
        padding: 10px;
        box-sizing: border-box;
        width: 100%;
        height: 200px;
        background-image: url("http://p1.music.126.net/_f8R60U9mZ42sSNvdPn2sQ==/109951162868126486.jpg");
        background-position: center;
        background-size: 100%;
        .toto{
            width: 100%;
            height: 30px;
            display: flex;
            color: #fff;
            justify-content: space-between;
        }
        
      
     }
     
     .principal{
         width: 100%;
         height: 80%;
       
         position: relative;
         .ert{
             width: 100%;
              height: 180px;
         }
         .mine{
              width: 96%;
              height: 180px;
              top: -15px;
            //   margin:auto;
              left: 2%;
              background-color: #fff;
              position: absolute;
              border-radius:10px;
             .profile1{
                //  margin:auto;
                 top: -36px;
                 z-index: 10;
                 left: 40%;             
                 position: absolute;
                 width: 71px;
                 height: 71px;
                 border: 1px solid transparent;
                 border-radius: 50%;
                 img{
                     width: 100%;
                    //  margin: auto;
                     border-radius: 50%;
                  }
               }
             .name1{
                //  position: relative;
                 margin-top: 40px;
                //  top: 40px;
                 width: 100%;
                 height: 28px;
              
                 text-align: center;
                 font-size: 18px;
             }
             .tiemy{
                 width: 80%;
                 height: 25px;
                 display: flex;
                 margin:auto;
                 justify-content: space-evenly;
                 span{
                     color: #979696;
                     font-size: 14px;
                 }
             }
             .mymss{
                 margin-top: 10px;
                 display: flex;
                 width: 80%;
                 margin:auto;
                 height: 30px;
                 text-align: center;
                 justify-content: space-around;
                 span{
                     padding: 2px;
                     border: 1px solid #999797;
                     border-radius: 10px;
                     font-size: 14px;
                     margin: 3px;
                 }
             }
              .textmy{
                 display: flex;
                 width: 80%;
                 margin:auto;
                 height: 30px;
                 margin-top: 10px;
                 justify-content: space-around;
                 span{
                     font-size: 14px;
                     color:#999797 ;
                    
                     i{
                        font-style: normal;
                        list-style: none;
                        padding: 3px;
                        border: 1px solid #999797;
                         border-radius: 10px;
                        margin: 3px;
                        &.iconfont{
                            border-radius: 50%;
                        }
                        
                     }
                 }
             }
           

            
         }

         .min-nav{
            width: 100%;
            height: 30px;
            padding-left:50px;
            padding-right: 50px;
            
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .toitem{
                font-size: 16px;
                font-weight: 600;
                 height: 18px;
                &.con{
                    border-bottom: 4px solid #fb5959;
                }
            }
         }
        .flist{
             width: 96%;
             height: 125px;
             display: flex;
             margin: auto;
             justify-content: space-between;
            // position: relative;
            .itemf{
                width: 32%;
                height: 110px;
                padding: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                background-color: #fff;
                position: relative;
                font-size: 14px;
                span{
                    position: absolute;
                    bottom: 10px;
                    width: 88%;
                    font-size: 14px;
                    box-sizing: border-box;
                    color: #f25252;
                    i{
                        font-style: normal;
                       position: absolute;
                       right: 6px;  
                       line-height: 20px;
                       font-size: 14px;
                    }
                }
            }
         }
         .essential{
            width: 96%;
            margin: auto;
            height: 200px;
            border-radius: 10px;
            background-color: #fff;
            padding: 6px;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 20px;
            h3{
              display: flex;
              justify-content: space-between;
               span{
                   &.ito{
                       font-size: 10px;
                       border: 1px solid #cfcfcf;
                       border-radius: 20px;
                       padding: 5px;
                       color:#818181 ;
                   }
               }
              
            }
            p{
                height: 20px;
                margin-top:10px ;
                margin-bottom: 10px;
                font-size: 14px;
                color:#cfcfcf ;
                i{
                    font-style: normal;
                    // list-style:armenian;
                }
            }
            div{
                &.buttom1{
                    width: 100%;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    position: absolute;
                    border-top: 1px solid #cfcfcf;
                    left: 0;
                    bottom: 10px;
                    color:#cfcfcf ;
                }
            }
         }
         .mu-taste{
             width: 96%;
             height: 170px;
             margin: auto;
             border-radius: 10px;
             background-color: #fff;
             padding: 10px;
             box-sizing: border-box;
             margin-bottom: 10px;
             h3{
                 height: 40px;
                  font-weight: 400;
                 line-height: 40px;
             }
             .yumu-list{
                height: 50px;
                // margin: 10px;
                margin-top: 5px;
                display: flex;
                .listimg{
                    width: 51px;
                    height: 51px;
                    border-radius: 10px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                }
                .img-to{
                        padding: 10px;
                        box-sizing: border-box;
                        h5{
                            margin-top:2px;
                            margin-bottom: 2px;
                            font-size: 14px;
                            height: 20px;
                            line-height: 20px;
                        }
                        p{
                            font-size: 10px;
                            color:#cfcfcf ; 
                            i{
                                font-style: normal;
                            }
                        }
                }
               
             }
         }
        
     }
      .bord{
             width: 100%;
             padding: 10px;
             border-radius: 10px;
             box-sizing:border-box;
             
            .toto{
                width: 100%;
                height: 30px;
                font-size: 16px;
                border-radius: 10px;
                background-color: #fff;
                margin-top: 10px;
                font-weight: 500;
                // display: ;
                h3{
                    width: 100%;
                    display: flex;
                    font-weight: 400;
                      span{
                          text-align:center;
                          line-height: 30px;
                          display: block;
                        &.iconfont{
                          // display: block;
                          width: 40px;
                          height: 100%;

                        }
                    }
                    
                }
            }
            //  height: ;\
            ul{
                 width: 100%;
                 border-radius: 10px;
                 background-color: #fff;
                //  padding: 10px;
                margin-top: 10px;
                //  box-sizing: border-box;
                li{
                     width: 100%;
                     height: 60px;
                     margin-top: 5px;
                     margin-bottom: 5px;
                     display: flex;
                     .podlistleft{
                        width: 20%;
                        height: 100%;
                        padding: 10px;
                        box-sizing: border-box;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                     }
                    //  border-bottom: 1px solid rgb(190, 187, 187);
                    .podlistright{
                      width: 80%;
                      height: 100%;
                      padding: 10px;
                      box-sizing:border-box;
                      h3{
                        //   padding-left: 30px;
                          box-sizing: border-box;
                          font-size: 16px;
                          height: 25px;
                          font-weight: 400;
                          overflow: hidden;
                          color: black;
                        &.bt{
                            width: 100%;
                            height: 20px;
                            font-size: 12px;
                            color: #999797;

                        }
                      }

                      
                   }
                }
            }
         }
      .bordt{
             width: 100%;
             padding: 10px;
            
              box-sizing:border-box;
            .toto{
                width: 100%;
                height: 45px;
                font-size: 18px;
                padding: 10px;
                border-radius: 10px;
                box-sizing:border-box;
                 background-color: #fff;
                // display: ;
                h3{
                    width: 100%;
                    display: flex;
                    font-size: 18px;
                     font-weight: 400;
                      span{
                          text-align:center;
                          line-height: 30px;
                          display: block;
                        &.iconfont{
                            // display: block;
                            width: 40px;
                            height: 100%;

                        }
                    }
                }
            }
            //  height: ;\
            ul{
                 width: 100%;
                 margin-top: 10px;
                 border-radius: 10px;
                 background-color: #fff;
                li{
                     width: 100%;
                     height: 60px;
                     font-size: 16px;
                    //  border-bottom: 1px solid rgb(190, 187, 187);
                     margin-top: 5px;
                     margin-bottom: 5px;
                     display: flex;
                      .podlistleft{
                        width: 20%;
                        height: 100%;
                        padding: 10px;
                        box-sizing: border-box;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                     }
                    .podlistright{
                      width: 100%;
                      height: 100%;
                      padding: 10px;
                      box-sizing:border-box;
                      h3{
                        //   padding-left: 30px;
                          box-sizing: border-box;
                          font-size: 16px;
                          font-weight: 400;
                          height: 25px;
                          overflow: hidden;
                          &.bt{
                            width: 100%;
                            height: 20px;
                            font-size: 12px;
                            color: #999797;

                        }
                      }
                      
                   }
                }
            }
        }
     
  }
</style>